import React, { useEffect } from 'react';
import { Card, Row, Col, Statistic, Typography, Divider } from 'antd';
import { UserOutlined, ShoppingCartOutlined, FileTextOutlined, DollarOutlined } from '@ant-design/icons';
import ReactECharts from 'echarts-for-react';

const { Title } = Typography;

const Welcome: React.FC = () => {
    useEffect(() => {
        document.title = '欢迎页面 - React管理系统';
    }, []);

    // 柱状图配置
    const barOption = {
        title: {
            text: '近七日用户访问量',
        },
        tooltip: {
            trigger: 'axis',
        },
        xAxis: {
            type: 'category',
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
        },
        yAxis: {
            type: 'value',
        },
        series: [
            {
                data: [820, 932, 901, 934, 1290, 1330, 1320],
                type: 'bar',
                showBackground: true,
                backgroundStyle: {
                    color: 'rgba(180, 180, 180, 0.2)',
                },
            },
        ],
    };

    // 折线图配置
    const lineOption = {
        title: {
            text: '本月销售趋势',
        },
        tooltip: {
            trigger: 'axis',
        },
        xAxis: {
            type: 'category',
            data: ['1日', '5日', '10日', '15日', '20日', '25日', '30日'],
        },
        yAxis: {
            type: 'value',
        },
        series: [
            {
                data: [150, 230, 224, 218, 135, 147, 260],
                type: 'line',
                smooth: true,
            },
        ],
    };

    return (
        <div>
            <Title level={2}>数据概览</Title>
            <Divider />

            <Row gutter={16}>
                <Col span={6}>
                    <Card>
                        <Statistic
                            title="用户总数"
                            value={1128}
                            prefix={<UserOutlined />}
                            valueStyle={{ color: '#3f8600' }}
                        />
                    </Card>
                </Col>
                <Col span={6}>
                    <Card>
                        <Statistic
                            title="商品总数"
                            value={93}
                            prefix={<ShoppingCartOutlined />}
                            valueStyle={{ color: '#1890ff' }}
                        />
                    </Card>
                </Col>
                <Col span={6}>
                    <Card>
                        <Statistic
                            title="订单总数"
                            value={1503}
                            prefix={<FileTextOutlined />}
                            valueStyle={{ color: '#722ed1' }}
                        />
                    </Card>
                </Col>
                <Col span={6}>
                    <Card>
                        <Statistic
                            title="总销售额"
                            value={112893}
                            prefix={<DollarOutlined />}
                            valueStyle={{ color: '#cf1322' }}
                            suffix="元"
                        />
                    </Card>
                </Col>
            </Row>

            <Divider />
            <Title level={3}>统计图表</Title>

            <Row gutter={[16, 16]} style={{ marginTop: 20 }}>
                <Col span={12}>
                    <Card>
                        <ReactECharts option={barOption} style={{ height: 300 }} />
                    </Card>
                </Col>
                <Col span={12}>
                    <Card>
                        <ReactECharts option={lineOption} style={{ height: 300 }} />
                    </Card>
                </Col>
            </Row>
        </div>
    );
};

export default Welcome; 